<template>

	<view class="maskings flexac">
		<view class="Express">
			<view class="iconfont icon-guanbi- Colse color_cc size42 " @click.stop="Hideexpressage"></view>
			<text class="color_33 bold size30">填写物流</text>
			<view class="ExprssPick">
				<picker mode="selector" class="selector" :zIndex="10" :range="facilitator" range-key="company"
					@change="facilitatorChang">
					<view class="size28" :class="facilitatorTxt?'black':'color_99'">
						{{facilitatorTxt?facilitatorTxt:`请选择物流服务商`}}
					</view>
				</picker>
				<image src="../../static/right.png" class="RightIcon"></image>
			</view>
			
			<view class="Odd">
				<input type="text" class="oddNumber" v-model="send_ordernum" placeholder="物流单号" placeholder-class="Styleclass"/>
				<view class="iconfont icon-saoma color_99 size32 padding20" @click.stop="scanCode"></view>
			</view>
			
			<button class="Button" :class="Confirm_not?'Confirm_yes':'Confirm_No'" type="default" @click="confirm_Btn">确定</button>
			
		</view>
	
	</view>
	
</template>

<script>
	import WX from 'jweixin-module';
	export default {
		name:"Material",
		data() {
			return {
				facilitator:[],
				facilitatorNum:'',
				send_ordernum:'', //快递单号
			};
		},
		created() {
			this.getLogisticsCompany();
		},
		methods:{
			
			scanCode(){
				let that = this;
				this.$http.get({
					url:'/singleSaleManageApi/getJsConfig',
				}).then(res=>{
					if(!res) return;
					WX.config({
						debug: false,
						appId:res.appId,
						timestamp: res.timestamp, // 必填，生成签名的时间戳
						nonceStr: res.nonceStr, // 必填，生成签名的随机串
						signature: res.signature, // 必填，签名
						jsApiList: res.jsApiList // 必填，需要使用的 JS 接口列表
					})
					WX.ready(function(){
						WX.scanQRCode({
							needResult:1,
							canType: ["qrCode","barCode"],
							success:function(result){
								const pageData = result.resultStr.split(',');
								if(pageData.length > 1){
									that.send_ordernum = pageData[1];
								}else{
									that.send_ordernum = result.resultStr;
								}
							}
						})
					});
					WX.error(function(err){
						console.log(err,'err');
					})
				})
				
			},
			getLogisticsCompany() {
				this.$http.get({
					url: '/singleSaleManageApi/getLogisticsCompany',
				}).then(res => {
					if (res.code != '100') return this.$Toast(res.msg);
					const result = res.data || [];
					this.facilitator = result;
				})
			},
			confirm_Btn(){
				const Obj = {
					send_code:this.facilitator[this.facilitatorNum].code,
					send_company:this.facilitator[this.facilitatorNum].company,
					send_ordernum:this.send_ordernum
				}
				this.$emit('Logistics',Obj)
			},
			facilitatorChang(e) {
				const Value = e.detail.value;
				this.facilitatorNum = Value;
			},
			Hideexpressage(){
				this.$emit('Hide',false)
			}
		},
		computed:{
			facilitatorTxt(){
				if(this.facilitatorNum === '') return;
				return this.facilitator[this.facilitatorNum].company;
			},
			
			Confirm_not(){
				if(this.facilitatorNum !== '' && this.send_ordernum){
					return true;
				}else{
					return false;
				}
			} 
		}
	}
</script>

<style lang="scss" scoped>
	.Express {
		width: 650rpx;
		background-color: #ffffff;
		border-radius: 10rpx;
		padding: 50rpx 20rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		position: relative;
	}
	
	.ExprssPick {
		width: 100%;
		height: 80rpx;
		border: 1rpx solid #ddd;
		margin-top: 30rpx;
		border-radius: 10rpx;
		display: flex;
		align-items: center;
		position: relative;
	}
	
	.selector {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 11;
		display: flex;
		align-items: center;
		padding: 0 20rpx;
	}
	
	.RightIcon {
		position: absolute;
		right: 10rpx;
		top: 50%;
		transform: translate(0, -50%);
		display: block;
		width: 28rpx;
		height: 28rpx;
		z-index: 13;
	}
	.Odd{
		width: 100%;
		height: 80rpx;
		padding-left:20rpx;
		border: 1rpx solid #ddd;
		margin-top: 30rpx;
		border-radius: 10rpx;
		display: flex;
		align-items: center;
		position: relative;
		overflow: hidden;
	}
	.oddNumber{
		flex:1;
		height: 100%;
		font-size:28rpx;
	}
	.Styleclass{
		color:#999;
	}
	.Button{
		width:300rpx;
		height: 80rpx;
		font-size:30rpx;
		color:#fff;
		border:none;
		margin-top:50rpx;
	}
	.Button::after{
		border:none;
	}
	.Confirm_yes{
		background-color:$color;
	}
	.Confirm_No{
		background-color:#ddd;
	}
	.Colse{
		position: absolute;
		top:10rpx;
		right: 10rpx;
		padding:20rpx;
	}
</style>